import React, { FC, ReactElement, useState, useEffect } from 'react';
import {
  Form,
  Input,
  DatePicker,
  Select,
  InputNumber,
  Checkbox,
  Radio,
} from 'antd';
import commonStyle from '@/pages/publicStyle';
import UploadCom from '@/components/UploadCom';
import moment from 'moment';
import { connect } from 'umi';
import { dataFormat2 } from '@/untils/dictionaries';

const { Option } = Select;
const RangePicker: any = DatePicker.RangePicker;
const { TextArea } = Input;
interface IProp {
  formData: any;
  saveImgUrl: (imgUrl: string) => void;
}
const StepTwo: FC<IProp> = (props): ReactElement => {
  const [state, setState] = useState(null);
  const plainOptions = ['产品规划', 'UI设计', '技术开发', '测试上线'];
  const projectPhotoCheck = (rules: any, value: any, callback: any) => {
    try {
      if (props.formData.projectPhoto) {
        return Promise.resolve();
      } else {
        return Promise.reject('请上传图片');
      }
    } catch (err) {
      callback(err);
    }
  };
  useEffect(() => {}, []);
  const { completeW } = commonStyle;
  return (
    <div>
      <Form.Item
        label="项目负责人"
        name="projectLeader"
        rules={[{ required: true }]}
      >
        <Select style={completeW}>
          <Option value="dachun">大春</Option>
          <Option value="xialuo">夏洛</Option>
          <Option value="qiuya">秋雅</Option>
          <Option value="dongmei">冬梅</Option>
        </Select>
      </Form.Item>
      <Form.Item label="开始时间" name="startTime" rules={[{ required: true }]}>
        <DatePicker
          format={dataFormat1}
          placeholder="请选择开始时间"
          style={completeW}
        />
      </Form.Item>
      <Form.Item
        label="项目周期"
        name="projectCycle"
        rules={[{ required: true }]}
      >
        <RangePicker
          format={dataFormat2}
          placeholder={['请选择项目开始日期', '请选择项目结束日期']}
          style={completeW}
          showTime
        />
      </Form.Item>
      <Form.Item
        label="项目图"
        name="projectPhoto"
        rules={[
          {
            required: true,
            validator: projectPhotoCheck,
          },
        ]}
      >
        <UploadCom
          tagMessage="可上传1张图片，支持5MB以下的图片</br>支持扩展名：.png .jpg .jepg ..."
          tagPosition={true}
          isImgBtn={true}
          ref={(ref: any) => {
            if (ref) ref.initImgSrc(props.formData.projectPhoto);
          }}
          UploadSuccess={(imgdata: any) => {
            props.saveImgUrl(imgdata.imgUrl);
          }}
        ></UploadCom>
      </Form.Item>
      <Form.Item
        label="项目金额"
        name="projectMoney"
        rules={[{ required: true }]}
      >
        <InputNumber
          style={completeW}
          addonBefore="￥"
          formatter={(value) =>
            `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
          }
          parser={(value) => Number(`${value}`.replace(/\$\s?|(,*)/g, ''))}
        />
      </Form.Item>
      <Form.Item label="项目描述" name="projectDescription">
        <TextArea rows={4} placeholder="请输入至少五个字符" />
      </Form.Item>
      <Form.Item label="服务内容" name="serviceContent">
        <Checkbox.Group options={plainOptions} />
      </Form.Item>
      <Form.Item label="服务类型" name="serviceType">
        <Radio.Group>
          <Radio value={1}>离岸开发</Radio>
          <Radio value={2}>人员服务</Radio>
          <Radio value={3}>第三方外包</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="附件" name="enclosure">
        <UploadCom
          tagMessage="最多上传3份附件，单个附件不大于50MB</br>支持扩展名：.rar .zip .doc .docx .pdf .jpg ..."
          UploadSuccess={(imgdata: any) => {}}
        ></UploadCom>
      </Form.Item>
    </div>
  );
};
export default StepTwo;
